import { Link, useLocation, useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { useContext } from 'react';
import { AuthContext } from '@/contexts/authContext';

export default function Navbar() {
  const location = useLocation();
  const navigate = useNavigate();
  const { isAuthenticated, user, logout } = useContext(AuthContext);
  
  const navItems = [
    { path: '/', label: '首页' },
    { path: '/roles', label: '角色列表' },
    { path: '/about', label: '关于我们' },
  ];

  return (
    <nav className="bg-white shadow-md">
      <div className="container mx-auto px-4 py-3 flex items-center justify-between">
        <Link to="/" className="flex items-center space-x-2">
          <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
            <i className="fa-solid fa-robot text-white text-xl"></i>
          </div>
          <span className="text-xl font-bold text-blue-700">AI角色</span>
        </Link>
        
        <div className="hidden md:flex items-center space-x-8">
          {navItems.map((item) => (
            <Link 
              key={item.path}
              to={item.path}
              className={cn(
                'font-medium transition-colors hover:text-blue-600',
                location.pathname === item.path 
                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
                  : 'text-gray-600'
              )}
            >
              {item.label}
            </Link>
          ))}
        </div>
          <div className="hidden md:flex items-center space-x-4">
            {isAuthenticated ? (
              <div className="flex items-center space-x-4">
                <span className="text-gray-600">欢迎，{user?.name || '用户'}</span>
                <button 
                  className="px-4 py-2 rounded-xl border border-blue-600 text-blue-600 hover:bg-blue-50 transition-colors"
                  onClick={logout}
                >
                  退出登录
                </button>
              </div>
            ) : (
              <>
                <Link to="/login" className="px-4 py-2 rounded-xl border border-blue-600 text-blue-600 hover:bg-blue-50 transition-colors">
                  登录
                </Link>
                <Link to="/register" className="px-4 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                  注册
                </Link>
              </>
            )}
          </div>
          
          <div className="md:hidden">
            <button className="text-gray-600 hover:text-blue-600">
              <i className="fa-solid fa-bars text-xl"></i>
            </button>
          </div>
      </div>
    </nav>
  );
}